<!--组合式-->
<template>
  <h1>{{count}}</h1>
  <h1>{{name}}</h1>
  <h1>{{sexStr}}</h1>
  <button @click="handleClick">count加1</button>
  <button @click="getInfo">获取点击</button>
  <table>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Password</th>
    </tr>
    <tr v-for="(info, index) in data.infos" :key="info.id">
      <td>{{info.id}}</td>
      <td>{{info.name}}</td>
      <td>{{info.password}}</td>
    </tr>
  </table>
</template>

<script setup>
  import {ref, reactive, computed} from 'vue'

  const count = ref(0);
  const name = ref('zhangsan');
  const data = reactive({sex:'1', age:19, infos:[]});

  const handleClick = () => {
    /* count.value++;  */
    data.sex = '女'
  }

  const getInfo = () => {
    data.infos = [{"id":1,"name":"zhangsan","password":"123456"},{"id":2,"name":"wangwu","password":"111111"},{"id":3,"name":"zhaoliu","password":"111111"}];
  }

  const sexStr = computed(()=>{
    return data.sex == 1 ? '男':'女'
  })
</script>

<style scoped>

</style>